<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body {
            height: 100%;
        }

        * {
            margin: 0px;
            height: 0px;
        }

        #map {
            width: 800px;
            height: 600px;
            border: 1px solid red;
        }
    </style>
    <script src="js/modules/echarts/echarts.min.js"></script>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div id="map"></div>
    <script>

        var geoCoordMap = { //这里放你打点的坐标信息，虚拟信息
            '乌鲁木齐市': [87.617733, 43.692818],
            '克拉玛依市': [84.973946, 45.495886],
            '吐鲁番市': [89.184078, 42.947613],
            '昌吉回族自治州': [89.304012, 44.214577],
            '博尔塔拉蒙古自治州': [82.074778, 44.923258],
            '巴音郭楞蒙古自治州': [87.150969, 39.768552],
            '阿克苏地区': [80.265068, 41.170712],
            '克孜勒苏柯尔克孜自治州': [76.172825, 39.713431],
            '喀什地区': [77.589138, 38.467664],
            '和田地区': [79.92533, 37.110687],
            '伊犁哈萨克自治州': [81.317946, 43.92186],
            '塔城地区': [82.985732, 46.746301],
            '阿勒泰地区': [88.13963, 47.848393],
            '哈密市': [93.304012, 43.214577]
        };
        var locValue = [
            { name: "乌鲁木齐市", value: "80" },
            { name: "吐鲁番市", value: "73" },
            { name: "克拉玛依市", value: "72" },
            { name: "昌吉回族自治州", value: "75" },
            { name: "博尔塔拉蒙古自治州", value: "53" },
            { name: "巴音郭楞蒙古自治州", value: "62" },
            { name: "阿克苏地区", value: "53" },
            { name: "克孜勒苏柯尔克孜自治州", value: "22" },
            { name: "喀什地区", value: "32" },
            { name: "和田地区", value: "21" },
            { name: "伊犁哈萨克自治州", value: "33" },
            { name: "塔城地区", value: "6" },
            { name: "阿勒泰地区", value: "12" },
            { name: "哈密市", value: "32" }
        ];
        var convertData = function (geoCoordMap, data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };

        // JSON
        var chart = null;
        var option = null;
        function load() {
            $.getJSON('https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=650000_full', function (data) {
                var option = {
                    backgroundColor: '#404a59',
                    /* legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: ['能耗'],
                        textStyle: { color: '#fff' }
                    }, */
                    visualMap: {
                        min: 0,
                        max: 100,
                        calculable: true,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    //鼠标经过展示数据方法
                    tooltip: {
                        triggerOn: "mousemove",
                        formatter: function (params) {
                            if (isNaN(params.value)) {
                                params.value = 0
                            }
                            if (params.componentSubType === 'effectScatter') {
                                params.value = params.data.value[2]
                            }
                            var tipHtml = '<div style="width:200px;height:100px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
                                + '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);margin-bottom:10px;">'
                                + '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>'
                                + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">' + '</i>'
                                + '能耗消费比例：' + '<span style="color:#f48225;margin:0 6px;">' + params.value + '</span>' + '%' + '</p>'
                                + '</div>' + '</div>';
                            return tipHtml;
                        },
                        backgroundColor: 'rgba(175,238,238, 0)',
                        // 额外附加的阴影
                        extraCssText: 'box-shadow:0 20px 20px rgba(128, 217, 248, 1)',
                    },
                    geo: {
                        show: true,
                        map: 'xinjiang',
                        roam: true,
                        aspectScale: 1,
                        label: {
                            emphasis: {
                                show: false,
                                color: "#fff"

                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(147, 235, 248, 1)',
                                borderWidth: 1,
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(47,79,79, .1)' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(128, 217, 248, 1)',
                                // shadowColor: 'rgba(255, 255, 255, 1)',
                                shadowOffsetX: -2,
                                shadowOffsetY: 2,
                                shadowBlur: 10
                            },
                            emphasis: {
                                areaColor: '#389BB7',
                                borderWidth: 0
                            }
                        },
                    },
                    series: [
                        {
                            type: 'effectScatter',
                            name: '能耗',
                            zlevel: 10,
                            coordinateSystem: 'geo',
                            data: convertData(geoCoordMap, locValue).slice(0, 18),
                            symbolSize: 12,
                            rippleEffect: {             //涟漪闪烁效果
                                period: 3,
                                scale: 3,
                                brushType: 'stroke'
                            },
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: '{b}==11' ? true : false
                                }
                            },
                            steps: 1
                        }
                    ],
                };
                echarts.registerMap('xinjiang', data);
                chart = echarts.init(document.getElementById('map'));
                chart.setOption(option);
                chart.on('click', function (params) {
                    console.log(params);
                });
            });

        }
        load();
        function queryLoad() {
            chart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: 0
            });
            load();
        }
    </script>
</body>

</html>